<template>
  <el-form
    label-suffix=":"
    v-loading="loading"
    
    :model="formData"
    :rules="type == 'add' || type == 'edit'  ? formRules : ''"
    ref="formRef"
    label-width="120px"
  >
      <vp-card>
        <el-row v-if="formData.lx == 10">
          <vp-col :span="1" >
              <el-space direction="vertical" alignment="flex-start">
                <vp-label zh="员工自愿报告系统收集到的报告内容如下：" en="The report content collected by the employee voluntary reporting system is as follows:"/>
                <vp-label zh="1、涉及航空器不良的运行环境、设备设施缺陷的报告；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Report on adverse operating environment and equipment and facility defects related to aircraft;"/>
                <vp-label zh="2、涉及到执行标准、飞行程序困难的事件报告；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Event reports involving difficulties in implementing standards and flight procedures;"/>
                <vp-label zh="3、除事故、征候和一般事件以外其他影响航空安全的事件报告；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Report on events that affect aviation safety, except for accidents, symptoms, and general events;"/>
                <vp-label zh="4、其他与航空安全直接相关的问题或建议。" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other issues or suggestions directly related to aviation safety."/>
              </el-space>
            </vp-col>
        </el-row>
        <el-row v-if="formData.lx == 20 ">
          <vp-col :span="1" >
              <el-space direction="vertical" alignment="flex-start">
                <vp-label zh="安全举报信息系统收集到的报告内容如下：" en="The report content collected by the security reporting information system is as follows:"/>
                <vp-label zh="1、涉及事故、征候和一般事件；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Involving accidents, symptoms, and general events;"/>
                <vp-label zh="2、涉及违法行为；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Involving illegal activities;"/>
                <vp-label zh="3、涉及安全隐患；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Involving safety hazards;"/>
                <vp-label zh="4、其他与航空安全直接相关的问题或建议。" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other issues or suggestions directly related to aviation safety."/>
              </el-space>
            </vp-col>
        </el-row>    
      </vp-card>
      <vp-card>
        <template #header>
            <vp-label zh="报告信息" en="Report Information"/>
          </template>
        <el-row>
           <vp-col :span="4" >
              <el-form-item prop="bh">
                <template #label><vp-label zh="报告编号" en="Report No."/></template>
                <el-input maxlength="100"
                v-model.trim="formData.bh"
                placeholder="不填写则自动生成"
                v-if="type === 'add' || type === 'edit'"
              />
              <sapn v-else>{{ formData.bh }}</sapn>
              </el-form-item>
          </vp-col>
          <vp-col :span="4">
            <el-form-item prop="bgrq">
              <template #label><vp-label zh="报告日期" en="Report Date"/></template>
              <el-date-picker
                v-model="formData.bgrq"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                v-if="type === 'add' || type === 'edit'"
              ></el-date-picker>
              <span v-else>{{ formData.bgrq }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row >
          <vp-col :span="1" >
            <el-form-item prop="nmbs">
              <template #label><vp-label zh="是否匿名" en="Is Anonymous" /></template>
                  <el-radio-group v-model="formData.nmbs" v-if="type === 'add' || type === 'edit' ">
                    <el-radio :label="1">是 YES</el-radio>
                    <el-radio :label="0">否 NO</el-radio>
                  </el-radio-group>
                  <span v-else>{{ formData.nmbs == 1 ? '是 YES' : formData.nmbs == 0 ? '否 NO'  : '' }}</span>
              </el-form-item>
          </vp-col>
      </el-row> 
      <el-row v-if="(formData.nmbs == 0 && formData.jb == 10 )|| (type != 'audit' && formData.jb == 20 && formData.nmbs == 0)">
        <vp-col :span="4" >
          <el-form-item el-form-item prop="bgr">
            <template #label><vp-label zh="报告人" en="Reporter"/></template>
                <span >{{ formData.bgr }}</span>
          </el-form-item>
        </vp-col>
        <vp-col :span="4" >
          <el-form-item el-form-item prop="bgbm">
            <template #label><vp-label zh="部门" en="Department"/></template>
                <span  >{{ formData.bgbm }}</span>
          </el-form-item>
        </vp-col>
        <vp-col :span="4" >
          <el-form-item prop="bgryx">
            <template #label><vp-label zh="报告人邮箱" en="Reporter Email"/></template>
                <el-input
                  v-model="formData.bgryx"
                  @blur="formData.bgryx = $event.target.value.trim()"
                  maxlength="100"
                  v-if="type === 'add' || type === 'edit' "
                >
                </el-input>
                <span v-else >{{ formData.bgryx }}</span>
          </el-form-item>
        </vp-col>
        <vp-col :span="4" >
          <el-form-item prop="bgrdh">
            <template #label><vp-label zh="报告人电话" en="Reporter Phone"/></template>
                <el-input
                  v-model="formData.bgrdh"
                  @blur="formData.bgrdh = $event.target.value.trim()"
                  maxlength="100"
                  v-if="type === 'add' || type === 'edit' "
                >
                </el-input>
                <span v-else >{{ formData.bgrdh }}</span>
          </el-form-item>
        </vp-col>
      </el-row>
    <el-row>
          <vp-col :span="1">
            <el-form-item prop="bgnr" >
              <template #label><vp-label zh="报告内容" en="Reprot Content"/></template>
                <el-input
                    v-model="formData.bgnr"
                    :autosize="{ minRows: 4}"
                    type="textarea"
                    v-if="type === 'add' || type === 'edit' "
                  ></el-input>
                  <span v-else  >{{ formData.bgnr }}</span>
            </el-form-item>
          </vp-col>
      </el-row>
      <el-row>
        <vp-col :span="4" v-if="(type === 'add' || type === 'edit' ) && formData.jb == 10">
          <el-form-item prop="shr" :class="type === 'add' || type === 'edit' ? 'is-required' : ''">
            <template #label><vp-label zh="部门审核人" en="Dept. Reviewer"/></template>  
            <el-input
                  v-model="formData.shr"
                  @blur="formData.shr = $event.target.value.trim()"
                  maxlength="1300"
                  readonly
                >
                <template #append>
                  <el-button @click="handleSearchShr"><SvgIcon name="ele-Search"/></el-button>
                </template>
                </el-input>
          </el-form-item>
        </vp-col>
      </el-row>
    </vp-card>
    <el-row>
        <FileListCard
          class="mt4 w100"
          :readOnly="type !== 'add' && type !== 'edit'"
          :attachmentList.sync="formData.attachments"
          @attachmentListEmit="getAttachmentListEmit($event, 2)"
        >
        </FileListCard>
    </el-row>
    <vp-card>
        <el-row v-if="formData.lx == 10 ">
          <vp-col :span="1" >
              <el-space direction="vertical" alignment="flex-start" :size="8">
                <vp-label zh="公司主动报告安全信息的途径：" en="The ways for companies to proactively report security information:"/>
                <vp-label zh="1、安全信息主动报告邮箱：anjianbu@cgac.net.cn；" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Security Technology Supervision Department Email: anjianbu@cgac.net.cn；"/>
                <vp-label zh="2、安全信息主动报告系统： 公司飞行运行管控系统（FOC）。" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address of Safety Technology Supervision Department: China General Aviation Co., Ltd., Dongli District, Tianjin Received by the Safety Technology Supervision Department (phone: 022-84391386）；"/>
                <vp-label zh="" en=""/>
                <vp-label zh="" en=""/>
              </el-space>
            </vp-col>
        </el-row> 
        <el-row v-if="formData.lx == 20 ">
          <vp-col :span="1" >
              <el-space direction="vertical" alignment="flex-start" :size="8">
                <vp-label zh="公司举报信息的途径：" en="Ways for companies to report information:"/>
                <vp-label zh="1、安全技术监察部电子邮箱：anjianbu@cgac.net.cn。" en="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Security Technology Supervision Department Email：anjianbu@cgac.net.cn。"/>
              </el-space>
            </vp-col>
        </el-row>    
      </vp-card>
  </el-form>
  <div v-if="formData.lx == 10 && formData.jb == 10 && formData.cnbs == 1 && (type == 'measure' || type == 'feedback' || type == 'view' || type == 'audit4measure' || type == 'valid')">
        <el-form
          label-suffix=":"
          v-loading="loading"
          :model="deptHandle"
          :rules="type == 'measure' || type == 'feedback' ?  dprtFormRules : []"
          ref="deptFormRef"
          label-width="120px"
      > 
      <vp-card>
          <template #header>
            <vp-label zh="指定责任部门" en="Designated Responsible Department"/>
          </template>
          <el-row>
            <vp-col :span="4">
              <el-form-item prop="zrbm">
                <template #label><vp-label zh="责任部门" en="Responsible Dept."/></template>
                <span  >{{ deptHandle.zrbm }}</span>
              </el-form-item>
            </vp-col>
            <vp-col :span="4">
              <el-form-item prop="zdfkr">
                <template #label><vp-label zh="反馈人" en="Feedback Person"/></template>
                <span  >{{ deptHandle.zdfkr }}</span>
              </el-form-item>
            </vp-col>
            <vp-col :span="4">
              <el-form-item prop="fkqx">
                <template #label><vp-label zh="反馈期限" en="Feedback Deadline"/></template>
                <span  >{{ deptHandle.fkqx }}</span>
              </el-form-item>
            </vp-col>
          </el-row>
          <el-row>
            <vp-col :span="1">
              <el-form-item prop="sm">
                <template #label><vp-label zh="说明" en="Description"/></template>
                <span  >{{ deptHandle.sm }}</span>
              </el-form-item>
            </vp-col>
          </el-row>
       </vp-card> 
      <vp-card>
        <template #header>
            <vp-label zh="处理措施" en="Handling Measures"/>
          </template>
            <el-row>
              <vp-col :span="1" >
                <el-form-item prop="clcs">
                  <template #label><vp-label zh="处理措施" en="Handling Measures"/></template>
                  <el-input
                        v-model="deptHandle.clcs"
                        maxlength="1300"
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        :class="type == 'measure' ? 'is-required' : ''"
                        v-if="type == 'measure'"
                    />
                    <span v-else >{{ deptHandle.clcs }}</span>
                </el-form-item>
              </vp-col>  
            </el-row>
        </vp-card>
        <vp-card v-if="type == 'feedback' || type == 'view' || deptHandle.clr">
            <template #header>
              <vp-label zh="反馈处理结果" en="Feedback Handling Result"/>
            </template>
            <el-row >
                <vp-col :span="4" >
                  <el-form-item prop="clr" >
                    <template #label><vp-label zh="处理人" en="Handler"/></template>
                      <el-input
                        v-model="deptHandle.clr"  readonly
                        @blur="deptHandle.clr = $event.target.value.trim()"
                        v-if="type == 'feedback'"
                        :class="type == 'feedback' ? 'is-required' : ''"
                      >
                      <template #append>
                        <el-button @click="handleSearchClr"><SvgIcon name="ele-Search"/></el-button>
                      </template>
                      </el-input>
                      <span v-else >{{ deptHandle.clr }}</span>
                </el-form-item>
              </vp-col>
              <vp-col :span="4" >
                <el-form-item prop="clrq">
                  <template #label><vp-label zh="处理日期" en="Handling Date"/></template>
                  <el-date-picker
                    v-model="deptHandle.clrq"
                    type="date"
                    style="width: 100%"
                    value-format="YYYY-MM-DD"
                    v-if="type == 'feedback'"
                  ></el-date-picker>
                  <span v-else>{{ deptHandle.clrq }}</span>
                </el-form-item>
              </vp-col>
              <vp-col :span="1" >
                <el-form-item prop="clqk">
                  <template #label><vp-label zh="处理情况" en="Handling Status"/></template>
                  <el-input
                        v-model="deptHandle.clqk"
                        maxlength="1300"
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        v-if="type == 'feedback'"
                    />
                    <span v-else >{{ deptHandle.clqk }}</span>
                </el-form-item>
              </vp-col>
              </el-row>
              <el-row>
                <vp-col :span="1" >
                  <el-form-item prop="yfcs">
                    <template #label><vp-label zh="预防措施" en="Preventive Measure"/></template>
                    <el-input
                          v-model="deptHandle.yfcs"
                          maxlength="1300"
                          :autosize="{ minRows: 3}"
                          type="textarea"
                          v-if="type == 'feedback'"
                      />
                      <span v-else >{{ deptHandle.yfcs }}</span>
                  </el-form-item>
                </vp-col>  
              </el-row>
              <el-row>
                <FileListCard
                  class="mt4 w100"
                  :readOnly="type !== 'feedback' "
                  :attachmentList.sync="deptHandle.attachments"
                  @attachmentListEmit="getDeptAttachmentListEmit($event, 2)"
                >
                  <template #header>
                    <vp-label zh="附件" en="Attachment"/>
                  </template>
              </FileListCard>
              </el-row>
        </vp-card>
        <vp-card v-if="type == 'view'">
          <template #header>
            <vp-label zh="处理结果验证" en="Handling Result Verification"/>
          </template>
          <el-row>
            <el-form-item prop="yzyj" >
              <template #label><vp-label zh="验证情况" en="Verification Status"/></template>
                  <span  >{{ deptHandle.yzyj }}</span>
            </el-form-item>
          </el-row>
        </vp-card>
       </el-form>
      </div>
  <UserDialog ref="userDialogRef"></UserDialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import { i18n } from "/@/i18n";
import { useUserInfo } from '/@/stores/userInfo';

export default defineComponent({
  name: "valuntaryDeptCommon",
  components: {
    FileListCard,
    UserDialog,
  },
  props: {
    id: String,
    type: String,
    lx: Number,
    jb:Number
  },
  emits: ["dataEmits"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      termInputType: 1,
      formData: {
        id: "",
        lx: null,
        jb: null,
        bh: "",
        bgrq: "",
        nmbs: 1,
        bgrid: "",
        bgr: "",
        bgbmid: "",
        bgbm: "",
        bgryx: "",
        bgrdh: "",
        bgnr: "",
        bgglfjid: "",
        shr: "",
        bmshr :"",
        attachments: [],
      },
      deptHandle: {
        zrbm: "",
        zdfkr: "",
        fkqx: "",
        sm: "",
        clcs: "",
        bmshr: "",
        shr: "",
        clr: "",
        clrid: "",
        clrq: "",
        clqk: "",
        yfcs: "",
        attachments: [],
        yzyj: "",
      },
      formRules: {
        bh:[validateUtils.notChinese],
        bgrq: [validateUtils.notNull],
        nmbs: [validateUtils.notNull],
        shr: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.formData.jb == 10 && !state.formData.shr) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
      },
      dprtFormRules : {
        clcs: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.type== 'measure' && !state.deptHandle.clcs) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
          clr: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.type== 'feedback' && !state.deptHandle.clr) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
          clrq: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.type== 'feedback' && !state.deptHandle.clrq) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
          clqk: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.type== 'feedback' && !state.deptHandle.clqk) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
      },
    });

    const initFormData = () => {
      state.formData = {
          id: "",
          lx: null,
          jb: null,
          bh: "",
          bgrq: "",
          nmbs: 1,
          bgrid: "",
          bgr: "",
          bgbmid: "",
          bgbm: "",
          bgryx: "",
          bgrdh: "",
          bgnr: "",
          bgglfjid: "",
          shr: "",
          bmshr :"",
          attachments: [],
      };
    };

    const editDialogRef = ref();
    const formRef = ref();
    const router = useRouter();
    const { t } = useI18n();
    const deptFormRef = ref();

    const handleOpen = (type: string, id: string, lx: number, jb: number) => {
      state.type = type;
      initFormData();
      if (type != "add") {
        state.loading = true;
        request.get(`/voluntary/dept/${id}`).then((res) => {
          state.formData = {
            ...state.formData,
            ...res.data,
          };
          state.deptHandle = {
            ...state.deptHandle,
            ...res.data.deptHandle,
          };
          state.loading = false;
          context.emit("dataEmits", state.formData);
        });
      }else{
        const user = useUserInfo().userInfos.user;
        state.formData.bgrid = user.id;
        state.formData.bgbm = user.bmmc;
        state.formData.bgbmid = user.bmdm;
        state.formData.bgr = user.realname;
        state.formData.bgryx = user.email;
        state.formData.bgrdh = user.cellphone;
        state.formData.lx = lx;
        state.formData.jb = jb;
      }
    };


    onMounted(() => {
      handleOpen(props.type || "add", props.id || "", props.lx || 10, props.jb || 10);
    });

    const getAttachmentListEmit = (list: any, lx: number) => {
          state.formData.attachments = list;
    };
    const getDeptAttachmentListEmit = (list: any, lx: number) => {
          state.deptHandle.attachments = list;
    };

    const getData = (zt : number): Promise<any>=>{
      let promise = new Promise((resolve, reject) => {
          if(zt == 10){
            resolve({
                  ...state.formData
              });
              return;
          }else{
            formRef.value.validate((valid: boolean) => {
              if (valid) {
                  resolve({
                      ...state.formData
                  });
              } else {
                  reject();
              }
            }) 
          }
      })
      return promise; 
    }

    const getDeptData = (zt : number): Promise<any>=>{
      let promise = new Promise((resolve, reject) => {
          if(zt == 10){
            resolve({
                  ...state.deptHandle
              });
              return;
          }else{
            deptFormRef.value.validate((valid: boolean) => {
              if (valid) {
                  resolve({
                      ...state.deptHandle
                  });
              } else {
                  reject();
              }
            }) 
          }
      })
      return promise; 
    }


    const userDialogRef = ref();

    const handleSearchShr = () =>{
      userDialogRef.value.handleOpen({
        type: 1,
        multi: false,
        selected: state.formData.bmshr,
        callback: (data: any) => {
          state.formData.bmshr = data.yhid;
          state.formData.shr = data.xm;
        }
      });
    }
    const handleSearchBmShr = () =>{
      userDialogRef.value.handleOpen({
        type: 1,
        multi: false,
        selected: state.deptHandle.bmshr,
        callback: (data: any) => {
          state.deptHandle.bmshr = data.yhid;
          state.deptHandle.shr = data.xm;
        }
      });
    }

    const handleSearchClr = () => {
      userDialogRef.value.handleOpen({
        type: 1,
        multi: false,
        selected: state.deptHandle.clrid,
        callback: (data: any) => {
          state.deptHandle.clrid = data.yhid;
          state.deptHandle.clr = data.xm;
        }
      });
    }

    return {
      ...toRefs(state),
      ...toRefs(props),
      editDialogRef,
      formRef,
      handleOpen,
      getAttachmentListEmit,
      getData,
      userDialogRef,
      handleSearchShr,
      deptFormRef,
      handleSearchBmShr,
      getDeptData,
      getDeptAttachmentListEmit,
      handleSearchClr,
    };
  },
});
</script>

<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
.el-space {
  margin-top: 0px;
}
:deep(.el-space__item) {
    padding-bottom: 0px !important;
     margin-right: 0px !important;
}
:deep(.el-divider--horizontal){
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
    border-top: 1px var(--el-border-color) var(--el-border-style);
}
:deep(.ycds-class .el-form-item__label) {
  width: 200px !important;
}
</style>
